<!-- 头部 -->
<template>
  <div class="leftTopBox-map ">
    <div class="boxline">
      <h2 class="titleText u-m-b-10">各年级平均 周/月/年 出勤率统计</h2>
      <div class="region-echarts" v-if="pageflag" style="height:200px;">
        <Echart
        id="leftBottom"
        :options="regionOptions"
        class="left_bottom_inner"
        v-if="pageflag"
        ref="charts"
         style="height:100%;"
      />
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
export default {
  name: "leftTopBox",
  components: {
    Echart,
  },
  props:{
    schooleId:{
      type:[String, Number],
      default:0
    }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 数值
    };
  },

  mounted() {
    this.getDataHandler();
  },
  methods: {
    async getDataHandler() {
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get("/data_center/getTotalGradeAttendance", {params});
      // console.log(data,'=======data')
      try {
        if (data.code === 0) {
          this.getData(data.data);
        }
      } catch {
        console.log("error");
      }
    },
    getData (data) {
      this.pageflag = true;
      const res = {
        dataList: [],
        aList: [],
        bList: [],
        cList: []
      }
      res.dataList=data.week.map( iv => { return iv.title })
      res.aList=data.week.map( iv => { return Number( iv.attendance.replace('%','') ) })
      res.bList=data.month.map( iv => { return Number( iv.attendance.replace('%','') ) })
      res.cList=data.year.map( iv => { return Number( iv.attendance.replace('%','') ) })
      console.log(res,'=========res')
      if (data) {
        this.init(res.dataList, res.aList, res.bList, res.cList)
      } else {
        this.pageflag = false;
      }
    },

    init (xData, yData, yData2, yData3) {
      this.regionOptions = {
        // color: ['#ff7000', '#469dff', '#22a11a '],
        legend: {
          icon: 'circle',
          textStyle: {
            color: '#ffffff'
          },
          data: ['本周', '本月', '本年']
        },
        xAxis: {
          type: 'category',
          data: xData,
          boundaryGap: true, // false不留白，从原点开始
          axisLabel: {
            color: '#ccc',
            fontWeight: '500'
          }
        },
        yAxis: {
          type: 'value',
          max: 100, // 最大值
          min: 0, // 最小值
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.3)",
            },
          },
          axisLabel: {
            color: "#fff",
            fontWeight: "500",
            formatter: function (value) {
              return value + '%';
            }
          },
        },
        tooltip: {
          trigger: 'axis',
          // backgroundColor: 'rgba(17, 43, 107, 1)',
          // borderColor: '#fff',
          // textStyle: {
          //   color: '#FFF'
          // },
          formatter: function (params) {
            var relVal = params[0].name
            for (var i = 0; i < params.length; i++) {
              relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
            }
            return relVal
          }
        },
        grid: {
          // 布局
          x: 50,
          y: 50,
          x2: 30,
          y2: 30
        },
        series: [
          {
            data: yData,
            name: '本周',
            type: 'line',
            smooth: true,
            itemStyle:this.itemStyleBack('#D97559','value','#D97559')
            // stack: 'Total'
          },
          {
            data: yData2,
            name: '本月',
            type: 'line',
            smooth: true,
            itemStyle:this.itemStyleBack('#0F40F5','value','#0F40F5')
            // stack: 'Total'
          },
          {
            data: yData3,
            name: '本年',
            type: 'line',
            smooth: true,
            itemStyle:this.itemStyleBack('#567722','value','#567722')
            // stack: 'Total'
          }
        ]
      };
    },
    itemStyleBack(color,val,labelColor) {
      return {
        normal: {
          color: color,
          borderColor: '#fff',
          barBorderRadius: 6,
          label: {
            show: true,
            position: "top",
            color: labelColor,
            formatter: function (p) {
              return p[val]  ? p[val] +'%' : "0%";
            },
          },
        },
      };
    },


  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.leftTopBox-map {
  width: 100%;
  height: 100%;
  .boxline{
    height: 100%;
  }
}
</style>
